<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">{{ isBatch ? '学生批量转入' : '学生信息管理' }}</div>
          <div :style="{ color: isBatch ? 'red' : 'inherit' }">
            {{ isBatch ? '*为必填项---(保存数据后在确认转入)' : '' }}
          </div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入学生姓名或电话"
            style="width: 180px"
            class="className"
            v-if="!isBatch"
          ></el-input>
          <el-input
            v-model="soleName"
            placeholder="请输入销售姓名"
            style="width: 150px"
            class="className"
            v-if="!isBatch && user.roleId != '5'"
          ></el-input>
           <el-input
            v-model="schoolName"
            placeholder="请输入学校名称"
            style="width: 150px"
            class="className"
            v-if="!isBatch"
          ></el-input>
          <div style="position: relative" v-if="!isBatch">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right">
          <img
            src="../../assets/images/back.png"
            alt="返回"
            @click="handleBack"
            v-if="isBatch"
            class="addmsg"
            title="返回"
          />
          <img
            src="../../assets/images/save.png"
            class="addmsg"
            alt=""
            @click="handleSave"
            v-if="isBatch"
            title="保存"
          />
          <img
            src="../../assets/images/ok.png"
            class="delimg"
            alt=""
            @click="handleBatchok"
            v-if="isBatch"
            title="确认转入"
          />
          <img
            src="../../assets/images/transferout.png"
            class="addmsg"
            alt=""
            @click="handleTransferOut"
            v-if="!isBatch && (user.roleId == '1' || user.roleId == '2')"
            title="转出学生"
          />
          <img
            src="../../assets/images/transfer.png"
            class="addmsg"
            alt=""
            @click="handleTransfer"
            v-if="!isBatch"
            title="批量转入学生"
          />
          <img
            src="../../assets/images/加号.png"
            class="addmsg"
            alt=""
            @click="handleAdd"
            v-if="!isBatch"
          />
          <img
            src="../../assets/images/删除.png"
            class="delimg"
            alt=""
            @click="handleDeleteAll"
            v-if="!isBatch"
          />
        </div>
      </div>
    </div>

    <div class="class-content">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKey"
      >
        <el-table-column type="selection" width="30" :reserve-selection="true" />
        <el-table-column prop="studentName" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="tel" label="电话" align="center" />
        <el-table-column prop="major" label="学校" align="center" />
        <el-table-column
          prop="saleId"
          label="销售顾问"
          :formatter="getSaleName"
          align="center"
        ></el-table-column>
        <el-table-column prop="remarks" label="备注" align="center" />
        <el-table-column prop="operation" label="操作" width="200" align="center">
          <template #default="{ row, $index }">
            <el-button link type="success" @click="handleEdit(row, $index)">修改</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
            <el-button link type="primary" @click="handleInto(row)">转入</el-button>
            <el-button link type="primary" @click="handleRowClick(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-table
        :data="selection"
        style="width: 100%; max-height: 300px"
        @selection-change="handleSelectionChange1"
        v-if="isBatch"
      >
        <el-table-column type="selection" width="40" align="center" fixed="left" />
        <el-table-column prop="studentName" width="120" align="center" fixed="left">
          <template #header>
            <span class="cell"> <span style="color: red">*</span>姓名 </span>
          </template>
          <template #default="{ row }">
            <el-input v-model="row.studentName" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="studentName" width="120" align="center">
          <template #header>
            <span class="cell"> <span style="color: red">*</span>性别 </span>
          </template>
          <template #default="{ row }">
            <el-select v-model="row.sex" placeholder="请选择" size="small" style="width: 96px">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="studentName" width="120" align="center">
          <template #header>
            <span class="cell"> <span style="color: red">*</span>电话 </span>
          </template>
          <template #default="{ row }">
            <el-input v-model="row.tel" size="small" />
          </template>
        </el-table-column>

        <el-table-column prop="major" label="学校和专业" width="130" align="center">
          <template #header>
            <span class="cell"> <span style="color: red">*</span>学校和专业 </span>
          </template>
          <template #default="{ row }">
            <el-input v-model="row.major" size="small" />
          </template>
        </el-table-column>

        <el-table-column prop="saleId" label="销售顾问" width="120" align="center">
          <template #header>
            <span class="cell"> <span style="color: red">*</span>销售顾问 </span>
          </template>
          <template #default="{ row }">
            <el-select
              v-model="row.saleId"
              placeholder="请选择销售顾问"
              size="small"
              style="width: 96px"
              :disabled="user.roleId == '5'"
            >
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="preCourse" width="150" align="center">
          <template #header>
            <span class="cell"> 预报学科 </span>
          </template>
          <template #default="{ row }">
            <el-select
              v-model="row.preCourse"
              placeholder="请选择预报学科"
              size="small"
              style="width: 126px"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseName"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="preDate" width="160" align="center">
          <template #header>
            <span class="cell"> 预开班日期 </span>
          </template>
          <template #default="{ row }">
            <el-date-picker
              v-model="row.preDate"
              type="date"
              value-format="YYYY-MM-DD"
              size="small"
              placeholder="请选择预报道日期"
              style="width: 136px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="preGraduation" width="160" align="center">
          <template #header>
            <span class="cell"> 预毕业日期 </span>
          </template>
          <template #default="{ row }">
            <el-date-picker
              v-model="row.preGraduation"
              type="date"
              value-format="YYYY-MM-DD"
              size="small"
              placeholder="请选择预毕业日期"
              style="width: 136px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="emContact" label="紧急联系人" width="120" align="center">
          <template #default="{ row }">
            <el-input v-model="row.emContact" size="small" />
          </template>
        </el-table-column>

        <el-table-column prop="emTel" label="紧急联系人电话" width="130" align="center">
          <template #default="{ row }">
            <el-input v-model="row.emTel" size="small" />
          </template>
        </el-table-column>

        <el-table-column prop="address" label="家庭地址" width="120" align="center">
          <template #default="{ row }">
            <el-input v-model="row.address" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="{ row, $index }">
            <el-button link type="primary" @click="handleEdit(row, $index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table> -->

      <!-- <div class="batch-remarks" v-if="isBatch">
        <el-input
          type="textarea"
          v-model="batchRemarks"
          placeholder="请输入通用备注（将添加到所有学生的备注末尾）"
          style="width: 90%; margin: 20px 0"
          resize="none"
          :autosize="{ minRows: 3, maxRows: 5 }"
        ></el-input>
      </div> -->

      <div class="page" v-if="!isBatch">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentPageChange"
        />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
        </div>
      </div>
    </div>
    <!-- 添加未报名学生 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加未报名招生"
      width="400px"
      :show-close="false"
      style="margin-top: 60px; margin-bottom: 0px"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="预开班日期" prop="preDate">
            <el-date-picker
              v-model="formData.preDate"
              type="date"
              placeholder="请选择预开班日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="预报毕业日期" prop="preGraduation">
            <el-date-picker
              v-model="formData.preGraduation"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入家庭住址" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData.major" placeholder="请输入学校和专业" />
          </el-form-item>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="销售顾问" prop="saleId">
            <el-select
              v-model="formData.saleId"
              placeholder="请选择销售顾问"
              :disabled="user.roleId == '5'"
            >
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="预报学科" prop="courseId">
            <el-select v-model="formData.courseId" placeholder="请选择预报学科">
              <el-option
                v-for="item in subjectList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData.remarks"
              autosize
              resize="none"
              style="width: 500px"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="数据填充">
            <el-input
              type="textarea"
              v-model="batchInput"
              autosize
              resize="none"
              style="width: 500px"
              placeholder="请输入数据（格式：姓名-性别-电话-学校和专业）"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
        <el-button type="primary" @click="handleInputChange">解析并填充</el-button>
      </template>
    </el-dialog>
    <!-- 修改学生信息 -->
    <el-dialog
      v-model="dialogVisible1"
      title="修改未报名招生"
      width="400px"
      :show-close="false"
      style="margin-top: 30px; margin-bottom: 0px"
    >
      <el-form
        :model="formData1"
        :rules="rules"
        ref="formRef1"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData1.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="预开班日期" prop="preDate">
            <el-date-picker
              v-model="formData1.preDate"
              type="date"
              placeholder="请选择预开班日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData1.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="预报毕业日期" prop="preGraduation">
            <el-date-picker
              v-model="formData1.preGraduation"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData1.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="家庭住址" prop="preGraduation">
            <el-input v-model="formData1.address" placeholder="请输入家庭住址" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData1.major" placeholder="请输入学校和专业" />
          </el-form-item>

          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData1.emContact" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="销售顾问" prop="saleId">
            <el-select
              v-model="formData1.saleId"
              placeholder="请选择销售顾问"
              :disabled="user.roleId == '5'"
            >
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData1.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="预报学科">
            <el-select v-model="formData1.courseId" placeholder="请选择预报学科">
              <el-option
                v-for="item in subjectList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-if="formData1.remarks">
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData1.remarks"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
              :disabled="!!formData1.remarks"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="formData1.remarks ? '新增备注' : '备注'" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData1.remarks1"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible1 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm1" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 转入学生信息 -->
    <el-dialog
      v-model="dialogVisible2"
      title="转为预报名学生"
      width="400px"
      :show-close="false"
      style="margin-top: 30px; margin-bottom: 0px"
    >
      <el-form
        :model="formData2"
        :rules="rules1"
        ref="formRef2"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData2.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="预开班日期" prop="preDate">
            <el-date-picker
              v-model="formData2.preDate"
              type="date"
              placeholder="请选择预开班日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData2.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="预报毕业日期" prop="preGraduation">
            <el-date-picker
              v-model="formData2.preGraduation"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData2.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="formData2.address" placeholder="请输入家庭住址" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData2.major" placeholder="请输入学校和专业" />
          </el-form-item>

          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData2.emContact" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="销售顾问" prop="saleId">
            <el-select v-model="formData2.saleId" placeholder="请选择销售顾问">
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData2.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="预报学科" prop="courseId">
            <el-select v-model="formData2.courseId" placeholder="请选择预报学科">
              <el-option
                v-for="item in subjectList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-if="formData2.remarks">
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
              :disabled="formData2.remarks"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="formData2.remarks ? '新增备注' : '备注'" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks1"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible2 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm2" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 点击显示信息 -->
    <el-drawer
      v-model="dialogVisibleInfo"
      title="学生信息"
      size="600"
      :show-close="false"
      style="background-color:#F0F8FF"
    >
      <div class="richang">
        <div class="name">
          <span class="name1">姓名：</span>
          <span class="name2">{{ selectedRow.studentName }}</span>
        </div>
        <div class="name">
          <span class="name1">性别：</span>
          <span class="name2">{{ selectedRow.sex }}</span>
        </div>
        <div class="name">
          <span class="name1">电话：</span>
          <span class="name2">{{ selectedRow.tel }}</span>
        </div>
        <div class="date">
          <span class="date1">学校和专业：</span>
          <span class="date2">{{ selectedRow.major }}</span>
        </div>
        <div class="date">
          <span class="date1">销售顾问：</span>
          <span class="date2">{{ selectedRow.saleName ?  selectedRow.saleName : '管理员'}}</span>
        </div>
        <div class="date">
          <span class="date1">录入时间：</span>
          <span class="date2">{{ selectedRow.createTime.substring(0,10)}}</span>
        </div>
        <div class="content">
          <span class="content1">备注：</span>
          <span
            class="content2"
            style="white-space: pre-line; word-break: break-all; display: block"
            >{{ selectedRow.remarks }}</span
          >
        </div>
      </div>
      <div class="footer1">
        <el-button @click="dialogVisibleInfo = false">关闭</el-button>
      </div>
    </el-drawer>
    <!-- 转给别的销售 -->
    <el-dialog
      v-model="dialogVisibleInfo1"
      title="转让学生"
      width="400px"
      :show-close="false"
      style="display: block"
    >
      <el-form :model="formDataOut" ref="formRefOut" label-width="100px" hide-required-asterisk>
        <el-row>
          <el-form-item label="转出销售顾问" prop="saleId" class="salecss">
            <el-select
              v-model="formDataOut.saleId1"
              placeholder="请选择销售顾问"
              @change="selectStudent"
            >
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择学生">
            <div class="student-checkbox-group">
              <el-checkbox-group v-model="transferSelectedStudents" class="checkbox-group">
                <el-checkbox
                  v-for="member in tableData2"
                  :key="member.studentId"
                  :value="member.studentId"
                  :id="'checkbox-' + member.studentId"
                  style="margin-right: 10px"
                >
                  {{ member.studentName }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="转入销售顾问" prop="saleId" class="salecss">
            <el-select v-model="formDataOut.saleId" placeholder="请选择销售顾问">
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisibleInfo1 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirmOut" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 批量转入 -->
    <el-dialog
      v-model="dialogVisible8"
      title="转为预报名学生"
      width="400px"
      :show-close="false"
    >
      <el-form
        :model="formData2"
        :rules="rules1"
        ref="formRef2"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="预开班日期" prop="preDate">
            <el-date-picker
              v-model="formData2.preDate"
              type="date"
              placeholder="请选择预开班日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="预报毕业日期" prop="preGraduation">
            <el-date-picker
              v-model="formData2.preGraduation"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="预报学科" prop="courseId">
            <el-select v-model="formData2.courseId" placeholder="请选择预报学科">
              <el-option
                v-for="item in subjectList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible8 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm8" class="confirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
import {
  getStudentData,
  getSaleList,
  getSubject,
  addStudent,
  deleteStudent,
  updateStudent,
  toPreStudent,
  StudentToSole,
} from '../api/StudentData'
//表格数据
const tableData = ref([])
// 总条目数
const total = ref(0)
// 每页显示的条目数量
const pageSize = ref(7)
// 当前页码
const currentPage = ref(1)
//搜索
const classSearchInput = ref('')
//搜索销售姓名
const soleName = ref('')
//搜索学校名称
const schoolName = ref('')
//勾选未报名学生
const selection = ref([])
//销售列表
const saleList = ref([])
//学科
const subjectList = ref([])

//选中的是第几行
const selectedRowIndex = ref(null)

//通用备注
const batchRemarks = ref('')

//是否是批量转入
const isBatch = ref(false)

//批量转入的时候第二个表格选中的学生数组
const AfterSelection = ref([])

//转让学生的数组
const transferSelectedStudents = ref([])

// 登入的用户
const user = JSON.parse(localStorage.getItem('user'))

//添加时候一条数据
const batchInput = ref('')

//转让学生数据
const tableData2 = ref([])

//
const dialogVisible8 = ref(false)



function getRowKey(row) {
  return row.studentId
}



//获取未报名学生接口
function fetchData() {
  let data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
  }
  if (classSearchInput.value) {
    const inputValue = classSearchInput.value.trim();
    const isPhoneNumber = /^\d+$/.test(inputValue);
    if (isPhoneNumber) {
      data.tel = inputValue;
    } else {
      data.studentName = inputValue;
    }
  }
  if (soleName.value) {
    //找出销售Id
    let saleId = ''
    saleList.value.forEach((item) => {
      if (item.userName == soleName.value) {
        saleId = item.userId
      }
    })
    if (saleId === '') {
      data.saleId = -1
    } else {
      data.saleId = saleId
    }
  }
  if (schoolName.value) {
    data.major = schoolName.value
  }
  //如果是销售
  if (user.roleId == '5') {
    data.saleId = user.userId
  }
  getStudentData('noSignUpList', data).then((res) => {
    if (res.code == 200) {
      tableData.value = res.dataset.studentList
      total.value = res.dataset.pageCount * pageSize.value
    }
  })
}

//获取销售列表接口
function fetchDataSaleList() {
  let data = {}
  getSaleList('saleName', data).then((res) => {
    if (res.code == 200) {
      saleList.value = res.dataset
      //加一项是管理员的加在第一项

      saleList.value.unshift({
        userId: 0,
        userName: '管理员',
      })
    }
  })
}

//获取学科接口
function fetchDataSubject() {
  getSubject('courseList', '').then((res) => {
    if (res.code == 200) {
      subjectList.value = res.dataset.courseList
    }
  })
}

//添加未报名学生接口
function fetchAddStudent() {
  let data = {
    studentName: formData.value.studentName,
    sex: formData.value.sex,
    tel: formData.value.tel,
    major: formData.value.major,
    saleId: formData.value.saleId,
    remarks: formData.value.remarks,
    preDate: formData.value.preDate,
    preGraduation: formData.value.preGraduation,
    preCourse: subjectList.value.find(item => item.courseId === formData.value.courseId)?.courseName || '',
    emContact: formData.value.emContact,
    emTel: formData.value.emTel,
    address: formData.value.address,
    courseId: formData.value.courseId,
  }

  addStudent('addNoSignUp', data).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '添加成功',
        type: 'success',
        duration: 2000,
      })
      dialogVisible.value = false
      fetchData()
    } else {
      ElMessage({
        message: '添加失败，请检查手机号是否重复',
        type: 'error',
        duration: 2000,
      })
    }
  })
}

//获取销售姓名
function getSaleName(row) {
  let name = ''
  if (row.saleId == '0') {
    return '管理员'
  }
  saleList.value.forEach((item) => {
    if (item.userId == row.saleId) {
      name = item.userName
    }
  })
  return name
}

//删除未报名学生接口
function fetchDeleteStudent(id) {
  let data = {
    studentId: id,
  }
  return new Promise((resolve, reject) => {
    deleteStudent('deleteNoSignUp', data)
      .then((res) => {
        if (res.code === 200) {
          resolve()
        } else {
          ElMessage({
            message: '删除失败',
            type: 'error',
            duration: 2000,
          })
          reject()
        }
      })
      .catch(() => {
        ElMessage({
          message: '删除失败',
          type: 'error',
          duration: 2000,
        })
        reject()
      })
  })
}

//修改未报名学生接口
async function fetchUpdateStudent() {
  let data = {
    studentId: formData1.value.studentId,
    studentName: formData1.value.studentName,
    sex: formData1.value.sex,
    tel: formData1.value.tel,
    major: formData1.value.major,
    saleId: formData1.value.saleId,
    preCourse:  subjectList.value.find(item => item.courseId === formData1.value.courseId)?.courseName || '' ,
    preDate: formData1.value.preDate,
    preGraduation: formData1.value.preGraduation,
    emContact: formData1.value.emContact,
    emTel: formData1.value.emTel,
    address: formData1.value.address,
    courseId: formData1.value.courseId,
  }
  if (formData1.value.remarks1) {
    if (formData1.value.originalRemarks) {
      data.remarks = formData1.value.originalRemarks + '\n' + formData1.value.remarks1
    } else {
      data.remarks = formData1.value.remarks1
    }
  } else {
    data.remarks = formData1.value.originalRemarks
  }
  let res = await updateStudent('updatePreStudent', data)
  if (res.code == 200) {
    ElMessage({
      message: '修改成功',
      type: 'success',
      duration: 2000,
    })
    dialogVisible1.value = false
    fetchData()
  } else {
    ElMessage({
      message: '修改失败',
      type: 'error',
      duration: 2000,
    })
  }
}

//转入预招生
async function fetchToPreStudent(data) {
  let res = await toPreStudent('toPreStudent', data)
  if (res.code == 200) {
    ElMessage({
      message: '转入成功',
      type: 'success',
      duration: 2000,
    })
    dialogVisible2.value = false
    fetchData()
  }
}

//转让学生
async function fetchTransferStudent(data) {
  let res = await StudentToSole('toAnotherSale', data)
  if (res.code == 200) {
    ElMessage({
      message: '转让成功',
      type: 'success',
      duration: 2000,
    })
    fetchData()
  } else {
    ElMessage({
      message: '转让失败',
      type: 'error',
      duration: 2000,
    })
  }
}

//数据初始化
onMounted(() => {
  fetchData()
  fetchDataSaleList()
})

//当前页码改变
function handleCurrentPageChange(val) {
  currentPage.value = val
  fetchData()
}

//勾选未报名学生
function handleSelectionChange(selection1) {
  selection.value= selection1
  console.log('学生数组', selection.value);
  
}

//搜索
function handleSearch() {
  fetchData()
}

//批量转成预招生
function handleTransfer() {
 
  //如果没有选中学生
  if (selection.value.length === 0) {
    ElMessage({
      message: '请勾选需要转出的学生',
      type: 'warning',
    })
  }else{
    //清空
    formData2.value.preDate = ''
    formData2.value.preGraduation = ''
    formData2.value.preCourse = ''
    formData2.value.remarks = ''
    fetchDataSubject()
    dialogVisible8.value = true
  }
  
  // if (selection.value.length === 0) {
  //   ElMessage({
  //     message: '请勾选需要转出的学生',
  //     type: 'warning',
  //   })
  // } else {
  //   isBatch.value = true
  //   //学科
  //   fetchDataSubject()
    //  //把选中的学生i对象放入数组中
    //  let data = [];
    //  selection.value.forEach((item) => {
    //    data.push(item);
    //  });
    //   //调接口
    //   fetchToPreStudent(data)
  // }
}
//批量转出确认
function handleConfirm8() {
  ElMessageBox.confirm('是否确认转出？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
      //遍历选中的学生
      selection.value.forEach((item) => {
        if(formData2.value.preDate){
          item.preDate = formData2.value.preDate
        }
        if(formData2.value.preGraduation){
          item.preGraduation = formData2.value.preGraduation
        }
        if(formData2.value.courseId){
          item.preCourse =  subjectList.value.find(item => item.courseId === formData2.value.courseId)?.courseName || '',
          item.courseId = formData2.value.courseId
        }
        if(formData2.value.remarks){
          if(item.remarks){
            item.remarks = item.remarks + '\n' + formData2.value.remarks
          }else{
            item.remarks = formData2.value.remarks
          }
        }
      })
      console.log('selection.value', selection.value);
      console.log('formData2.value', formData2.value);
      
      
      //调接口
      fetchToPreStudent(selection.value)
      dialogVisible8.value = false
  })
}


//添加未报名学生
function handleAdd() {
  fetchDataSubject()
  if (formRef.value) {
    formRef.value.resetFields()
    // formRef.value.clearValidate()
  }
  if (user.roleId == '5') {
    formData.value.saleId = user.userId
  }

  dialogVisible.value = true
}
//删除未报名学生
async function handleDelete(row) {
  try {
    // 弹出确认对话框
    await ElMessageBox.confirm('是否确认删除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    // 调用删除接口
    await fetchDeleteStudent(row.studentId)
    // 删除成功提示
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    // 重新获取数据
    fetchData()
  } catch (error) {
    if (error === 'cancel') {
      // 用户取消删除操作
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    } else {
      // 删除失败提示
      ElMessage({
        type: 'error',
        message: '删除失败',
      })
    }
  }
}

//批量删除
function handleDeleteAll() {
  if (selection.value.length === 0) {
    ElMessage({
      message: '请勾选需要删除的学生',
      type: 'warning',
    })
    return
  }
  ElMessageBox.confirm('是否确认删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      const ids = selection.value.map((item) => item.studentId)
      const deletePromises = ids.map((id) => fetchDeleteStudent(id))

      Promise.all(deletePromises)
        .then(() => {
          // 所有删除请求成功，提示删除成功并重新获取数据
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          fetchData()
        })
        .catch(() => {
          // 有删除请求失败，提示部分或全部删除失败
          ElMessage({
            type: 'error',
            message: '部分或全部删除失败',
          })
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

//修改
function handleEdit(row, index) {
  if (isBatch) {
    selectedRowIndex.value = index // 保存选中的行索引
  }

  fetchDataSubject()

  formData1.value = { ...row, originalRemarks: row.remarks, remarks1: '' }
  dialogVisible1.value = true
}

//修改确认
function handleConfirm1() {
  if (formRef1.value) {
    formRef1.value.validate((valid) => {
      if (valid) {
        ElMessageBox.confirm('是否确认修改？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            if (isBatch) {
              selection.value[selectedRowIndex.value] = formData1.value // 更新选中的行数据
              if (formData1.value.remarks1) {
                if (formData1.value.remarks) {
                  selection.value[selectedRowIndex.value].remarks =
                    formData1.value.remarks + '\n' + formData1.value.remarks1
                } else {
                  selection.value[selectedRowIndex.value].remarks = formData1.value.remarks1
                }
              }
            }

            await fetchUpdateStudent()
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消修改',
            })
          })
      }
    })
  }
}

//转入
function handleInto(row) {
  fetchDataSubject()
  if (formRef2.value) {
    formRef2.value.resetFields()
  }
  dialogVisible2.value = true
  formData2.value = { ...row }
  formData2.value.remarks1 = ''
}
//确认转入
function handleConfirm2() {
  if (formRef2.value) {
    formRef2.value.validate((valid) => {
      if (valid) {
        ElMessageBox.confirm('是否确认转入？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            let data = {
              studentName: formData2.value.studentName,
              sex: formData2.value.sex,
              tel: formData2.value.tel,
              major: formData2.value.major,
              studentId: formData2.value.studentId,
              preCourse:  subjectList.value.find(item => item.courseId === formData2.value.courseId)?.courseName || '' ,
              preDate: formData2.value.preDate,
              preGraduation: formData2.value.preGraduation,
              emContact: formData2.value.emContact,
              emTel: formData2.value.emTel,
              address: formData2.value.address,
              remarks: formData2.value.remarks,
              saleId: formData2.value.saleId,
              courseId: formData2.value.courseId,
            }

            if (formData2.value.remarks1) {
              if (formData2.value.remarks) {
                data.remarks = formData2.value.remarks + '\n' + formData2.value.remarks1
              } else {
                data.remarks = formData2.value.remarks1
              }
            }

            fetchToPreStudent([data])
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消转入',
            })
          })
      }
    })
  }
}

//点击保存数据
async function handleSave() {
  try {
    const promises = selection.value.map((item) => {
      //拼接备注
      if (batchRemarks.value) {
        item.remarks = item.remarks ? item.remarks + '\n' + batchRemarks.value : batchRemarks.value
      }
      const data = {
        studentName: item.studentName,
        sex: item.sex,
        tel: item.tel,
        major: item.major,
        studentId: item.studentId,
        preCourse: item.preCourse,
        preDate: item.preDate,
        preGraduation: item.preGraduation,
        emContact: item.emContact,
        emTel: item.emTel,
        address: item.address,
        remarks: item.remarks,
        saleId: item.saleId,
      }
      return updateStudent('updatePreStudent', data)
    })
    await Promise.all(promises)
    ElMessage.success('所有学生信息更新成功')
    batchRemarks.value = '' // 清空备注
  } catch {
    ElMessage.error('部分学生信息更新失败')
  }
}

//点击返回按钮
function handleBack() {
  //selection 变为空
  isBatch.value = false
  selection.value = []
}

//批量转入的时候第二个表格选中的学生数组
function handleSelectionChange1(selectionAll) {
  AfterSelection.value = selectionAll
}

//批量转成预招生
async function handleBatchok() {
  try {
    await ElMessageBox.confirm('是否确认转入？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    if (AfterSelection.value.length === 0) {
      ElMessage({
        message: '请勾选需要转出的学生',
        type: 'warning',
      })
    } else {
      await fetchToPreStudent(AfterSelection.value)
      isBatch.value = false
    }
  } catch (error) {
    ElMessage.info('取消转入')
  }
  
}

//人员转出下拉框改变
function selectStudent(value) {
  let data = {
    saleId: value,
    pageIndex: 1,
    pageSize: 1000,
  }
  getStudentData('noSignUpList', data).then((res) => {
    if (res.code == 200) {
      tableData2.value = res.dataset.studentList
    }
  })
}

//人员转出 转让给别的销售
function handleTransferOut() {
  tableData2.value = []
  transferSelectedStudents.value = []
  formDataOut.saleId1 = ''
  dialogVisibleInfo1.value = true
  formDataOut.saleId = ''
  if (formRefOut.value) {
    formRefOut.value.resetFields()
    // formRef.value.clearValidate()
  }
}

//转让学生给别的销售确认按钮
function handleConfirmOut() {
  if (formRefOut.value) {
    formRefOut.value.validate((valid) => {
      if (valid) {
        if (formDataOut.saleId == '' && formDataOut.saleId != '0') {
          ElMessage({
            message: '请选择销售顾问',
            type: 'warning',
          })
          return
        }
        if (transferSelectedStudents.value.length === 0) {
          ElMessage({
            message: '请勾选需要转出的学生',
            type: 'warning',
          })
          return
        } else {
          ElMessageBox.confirm('是否确认转出？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              fetchTransferStudent({
                saleId: formDataOut.saleId,
                studentIds: transferSelectedStudents.value,
              })
              dialogVisibleInfo1.value = false
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消转出',
              })
            })
        }
      }
    })
  }
}

// 添加未报名学生模态框
// 新增：模态框显示状态
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
// 新增：表单数据
const formData = ref({
  studentName: '',
  sex: '',
  preCourse: '',
  preDate: '',
  preGraduation: '',
  tel: '',
  address: '',
  emContact: '',
  emTel: '',
  major: '',
  remarks: '',
  address: '',
  courseId: '',
})
const formData1 = ref({
  studentName: '',
  sex: '',
  preCourse: '',
  preDate: '',
  preGraduation: '',
  tel: '',
  address: '',
  emContact: '',
  emTel: '',
  major: '',
  remarks: '',
  remarks1: '',
  address: '',
  courseId: '',
})
const formData2 = ref({
  studentName: '',
  sex: '',
  preCourse: '',
  preDate: '',
  preGraduation: '',
  tel: '',
  address: '',
  emContact: '',
  emTel: '',
  major: '',
  remarks: '',
  address: '',
  remarks1: '',
  courseId: '',
})
const formDataOut = reactive({
  saleId: '',
  saleId1: '',
})

// 新增：表单引用
const formRef = ref(null)
const formRef1 = ref(null)
const formRef2 = ref(null)
const formRefOut = ref(null)
// 新增：表单验证规则
const rules = {
  studentName: [
    { required: true, message: '请输入学生姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  tel: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
  saleId: [{ required: true, message: '请选销售顾问', trigger: 'change' }],
  emTel: [
    { 
      validator: (rule, value, callback) => {
        if (value && !/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      trigger:  'blur'
    }
  ],
}
const rules1 = {
  studentName: [
    { required: true, message: '请输入学生姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  // preCourse: [{ required: true, message: '请选择预报学科', trigger: 'change' }],
  tel: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
  saleId: [{ required: true, message: '请选销售顾问', trigger: 'change' }],
  emTel: [
    { 
      validator: (rule, value, callback) => {
        if (value && !/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      trigger:  'blur'
    }
  ],
  // preDate: [
  //   { required: true, message: '请选择预计入学日期', trigger: 'change' },
  // ],
  // preGraduation: [
  //   { required: true, message: '请选择预计毕业日期', trigger: 'change' },
  // ],
}
//添加确认
function handleConfirm() {
  if (formRef.value) {
    formRef.value.validate((valid) => {
      if (valid) {
        ElMessageBox.confirm('是否确认添加？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            fetchAddStudent()
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消添加',
            })
          })
      }
    })
  }
}

// 新增：信息模态框显示状态
const dialogVisibleInfo = ref(false)
// 转给别的销售显示状态
const dialogVisibleInfo1 = ref(false)
// 新增：选中的行数据
const selectedRow = reactive({})

// 处理行点击事件
function handleRowClick(row) {
  Object.assign(selectedRow, row)
  dialogVisibleInfo.value = true
}

//输入一行数据
function handleInputChange() {
  const input = batchInput.value.trim() // 去除输入框中的空格和换行符
  if (input) {
    const [name, sex, tel, major] = input.split('-').map((item) => item.trim())
    formData.value.studentName = name
    formData.value.sex = sex
    formData.value.tel = tel
    formData.value.major = major
    batchInput.value = '' // 清空输入框
  } else {
    return
  }
}

function handleChange(){
  currentPage.value = 1; // 重置页码为1
  fetchData(currentPage.value,pageSize.value,classSearchInput.value)
}
</script>

<style scoped>
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
.line2 {
  width: 10px;
  height: 2px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #9b9b9b;
}
:deep(.className .el-input__wrapper){
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
/* 加号 */
.addmsg {
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
/* 垃圾桶 */
.delimg {
  width: 25px;
  height: 25px;
}

/* 表格数据 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
:deep(.el-table__body-wrapper .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-select) {
  width: 200px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}
:deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
}

/* 展示信息 */
.name,
.content,
.date {
  color: black;
  font-size: 15px;
  margin-left: 0px;
  margin-bottom: 20px;
}
.content {
  display: flex;
  margin-top: 20px;
}
.content2 {
  width: 490px;
  height: 310px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.date {
  margin-top: 20px;
}

.el-dialog__footer button {
  background-color: #0f6ab1;
  color: white;
  margin-right: 20px;
}
.el-dialog__footer button:hover {
  background-color: #054a80;
  color: white;
}

:deep(.el-textarea__inner) {
  min-height: 50px !important;
  max-height: 100px !important;
  overflow-y: auto !important;
}
/* 通用备注 */
.batch-remarks {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* 转让销售数据 */
.student-checkbox-group {
  max-height: 100px;
  overflow-y: auto;
}

.checkbox-group {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 每行显示四个列 */
}
:deep(.el-form-item__content) {
  align-items: normal;
}
.salecss {
  height: 32px;
}

:deep(.el-drawer header) {
  background-color: #0f6ab1;
  margin-bottom: 0;
  padding-bottom: 20px;
}
:deep(.el-drawer header span) {
  color: white;
}

:deep(.el-drawer__header span) {
  text-align: center;
  color: black;
  font-size: 20px;
}
.footer1 {
  
  text-align: right;
}
.footer1 button {
  background-color: #0f6ab1;
  color: white;
  margin-right: 20px;
}
.footer1 button:hover {
  background-color: #054a80;
  color: white;
}


:deep(.el-drawer header) {
  background-color: #0f6ab1;
  margin-bottom: 0;
  padding-bottom: 20px;
}
:deep(.el-drawer header span) {
  color: white;
}

:deep(.el-drawer__header span){
  text-align: center;
  color: black;
  font-size: 20px;
}
</style>